<template>
  <!-- 报修列表项 组件 -->
  <view>
    <!-- 报修item -->
    <view style="width: 100%;
                 height: 250rpx;
                 background-color: #ffffff;
                 border-radius: 15rpx;
                 margin-top: 30rpx;
                 ">
      <!-- 报修标题 -->
      <view class="u-line-1" style="width: 350rpx;
                                    position: relative;
                                    top: 30rpx;
                                    left: 30rpx;
                                    right: 30rpx;">{{repair.type}}</view>
      <!-- 报修时间 -->
      <view class="bxtime">报修时间：{{repair.releaseTime}}</view>
      <!-- 已完成 or 已评价 -->
      <view class="bxstatus" v-if="repair.status=='新任务'">新报修</view>
      <view class="bxstatus" v-else>{{repair.status}}</view>
      <view class="btn">
        <!-- 马上评价 -->
        <view @click="msassess(repair.id)" class="mspj" v-if="repair.status==='已维修'">马上评价</view>
        <!-- 查看详情 -->
        <view @click="ckdetail(repair.id)" class="ckxq" :style="[{top: repair.status==='已维修' ? -78 : -15+'rpx'}]">
          查看详情
          </view>
      </view>
      
    
    </view>
  </view>
</template>

<script>
  export default {
    name:"my-repair-item",
    props: {
      // 报修记录的信息对象
      repair: {
        type: Object,
        default: {},
      },
      
    },
    data() {
      return {
        
      };
    },
    methods:{
      msassess(id){
        uni.navigateTo({
          url: '/subpkg/repair-assess/repair-assess?id=' + id
        })
        // this.$emit('click',id); 
      },
      ckdetail(id){
        uni.navigateTo({
          url: '/subpkg/repair-detail/repair-detail?id=' + id
        })
        // this.$emit('click',id); 
      },
    }
  }
</script>

<style lang="scss">
.bxtime {
    width: 340rpx;
    margin: 20rpx 0 20rpx 0;
    font-size: 32rpx;
    color: #a3a3a5;
    position: relative;
    top: 30rpx;
    left: 30rpx;
  }

  .bxstatus {
    width: 110rpx;
    background-color: #fef7e5;
    font-size: 32rpx;
    color: #fdcd65;
    font-weight: bold;
    position: relative;
    top: -140rpx;
    left: 520rpx;
    padding-left: 20rpx;
    padding-top: 5rpx;
    padding-bottom: 5rpx;
    border-radius: 5rpx;
  }
  
  .btn{
    position: relative;
    top: -40rpx;
    left: -240rpx;
    width: 50rpx;
    height: 50rpx;
    margin-left: 400rpx;
  }

  .mspj {
    border: 5rpx solid #79c8c8;
    padding-left: 40rpx;
    padding-top: 5rpx;
    width: 160rpx;
    height: 50rpx;
    position: relative;
    // left: 220rpx;
    left: 70rpx;
    top: -15rpx;
    font-size: 32rpx;
    color: #79c8c8;
    border-radius: 50rpx;
  }

  .ckxq {
    border: 5rpx solid #51c7c9;
    background-color: #51c7c9;
    padding-left: 40rpx;
    padding-top: 5rpx;
    width: 160rpx;
    height: 50rpx;
    position: relative;
    left: 290rpx;
    top: -78rpx;
    font-size: 32rpx;
    color: #FFFFFF;
    border-radius: 50rpx;
  }
</style>
